<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>
<!-- 2.创建一个舞台 -->
<div id="root">

</div>

<body>
    <script type="text/babel">
        /**
         * js表达式 和 js语句？
         * js表达式：(js表达式都是有值的，可以用变量接收或者直接使用console打印)
         * 1. 常量和变量
         *    usonb(you are so n b)
         *    u : undefined
         *    s : string
         *    o : object
         *    n : null、 number
         *    b : boolean
         *
         * 2. 三元表达式
         *      true ? 'i do' : 'i don't'
         * 3. 逻辑运算表达式
         *      5 && 8
         * 4. 函数的调用
         *
         *
         * js语句包括：
         * 1. 循环语句
         * 2. if else
         * 3. switch case
         * 4. 赋值语句
         *
         *
         * jsx中的 插值表达式： {js表达式}
         *
         *
         *    s : string     渲染
         *        number： 渲染
         *    o : object
         *        对象： {username:'atguigu',age:20}
         *               报错：Objects are not valid as a React child
         *                     对象数据类型不能作为react的子元素
         *
         *        数组： [1,2,3,4]   将数组中的每一个元素，进行遍历渲染
         *
         *    n : null       不渲染任何内容
         *    u : undefined  不渲染任何内容
         *    b : boolean
         *        true: 不渲染任何内容
         *        false:不渲染任何内容
         *
         */
        // jsx中的 插值表达式： {js表达式}
        const root = ReactDOM.createRoot(document.getElementById('root'));
        let a = 123;
        let isLoading = false
        function fn(){
            return [1,2,3]
        }
        root.render((
            <div>
                <h3>基本数据类型</h3>
                <hr/>
                <p>数字类型: {a}</p>
                <p>字符串: {'abc'}</p>
                <hr/>
                <h3>布尔类型</h3>
                <p>true: {true} 布尔值不会显示</p>
                <p>false: <span>{false}</span> 布尔值不会显示</p>
                <hr/>
                <h3>对象类型</h3>
                <p>数组类型: {[1,2,3,4]}</p>
                <hr/>
                <h3>三元表达式</h3>
                {isLoading?'页面加载中...':'页面内容'}
                <h3>逻辑预算</h3>
                <span>{6 || 8}</span>
                <hr/>
                <h3>函数调用</h3>
                <span>{fn()}</span>
            </div>
        ));
    </script>
</body>
</html>